<style>
@media print {
  ._wz_InsuranceDetails {
    -webkit-print-color-adjust: exact;
    height: inherit !important;
    font-size: 12px !important;
  }
}
</style>
<template>
  <div class="_wz_InsuranceDetails" ref="InsuranceDetails">
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">
          基本信息
          <Button type="primary" @click="printTest" class="no-print" style="position: absolute;right: 10px;top: 8px;">
            打印
          </Button>
        </td>
      </tr>
      </tbody>
    </table>
    <table cellpadding="0" cellspacing="0" border="0">
      <colgroup>
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
        <col width="13%">
        <col width="20%">
      </colgroup>
      <tbody>
      <tr>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">登记编号</td>
        <td style="border-top: 0px;">{{!!policyData.insuranceNumber?policyData.insuranceNumber:'--'}}</td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">车牌号</td>
        <td style="border-top: 0px;">{{!!policyData.insuranceVehicleTrailerPlateNo?policyData.insuranceVehicleTrailerPlateNo:'--'}}</td>
        <td style="text-align: right;font-weight: 600;border-top: 0px;">车架号</td>
        <td style="border-top: 0px;">{{!!policyData.insuranceVehicleTrailerFrameNo?policyData.insuranceVehicleTrailerFrameNo:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车辆类型</td>
        <td>{{!!policyData.insuranceVehicleTrailerType?policyData.insuranceVehicleTrailerType:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">车辆品牌</td>
        <td>{{!!policyData.insuranceVehicleTrailerBrand?policyData.insuranceVehicleTrailerBrand:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">车辆型号</td>
        <td>{{!!policyData.insuranceVehicleTrailerModel?policyData.insuranceVehicleTrailerModel:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">初登日期</td>
        <td>{{!!policyData.insuranceVehicleTrailerIssueDate?policyData.insuranceVehicleTrailerIssueDate:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">运输企业</td>
        <td colspan="3">{{!!policyData.deptName?policyData.deptName:'--'}}</td>
      </tr>
      <tr>
        <td style="font-weight: 600;position:relative;" colspan="6">保险信息</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">车主业户</td>
        <td>{{!!policyData.insuranceVehicleTrailerOwnerName?policyData.insuranceVehicleTrailerOwnerName:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">联系电话</td>
        <td>{{!!policyData.insuranceVehicleTrailerOwnerPhone?policyData.insuranceVehicleTrailerOwnerPhone:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">登记人</td>
        <td>{{!!policyData.insuranceRegistrantName?policyData.insuranceRegistrantName:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">保险公司</td>
        <td>{{!!policyData.insuranceCompanyValue?policyData.insuranceCompanyValue:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">保险项目</td>
        <td>{{!!policyData.insuranceTypeValue?policyData.insuranceTypeValue:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">办理时间</td>
        <td>{{!!policyData.insuranceDate?policyData.insuranceDate:'--'}}</td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">提醒天数</td>
        <td>{{!!policyData.insuranceRemindDay?policyData.insuranceRemindDay:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">提醒日期</td>
        <td>{{!!policyData.insuranceRemindDate?policyData.insuranceRemindDate:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">提醒状态</td>
        <td>
          <i-switch v-model.number="policyData.insuranceWhetherRemind" :false-value="0" :true-value="1" disabled>
            <span slot="open">开</span>
            <span slot="close">关</span>
          </i-switch>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">生效日期</td>
        <td>{{!!policyData.insuranceEffectiveDate?policyData.insuranceEffectiveDate:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">到期日期</td>
        <td>{{!!policyData.insuranceExpireDate?policyData.insuranceExpireDate:'--'}}</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">全费</td>
        <td>{{!!policyData.insuranceFullFee?policyData.insuranceFullFee:'--'}}</td>
        <td style="text-align: right;font-weight: 600;">净费</td>
        <td>{{!!policyData.insuranceNetFee?policyData.insuranceNetFee:'--'}}</td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">保险资料</td>
        <td colspan="5">
          <div style="min-height:50px;">
            <div style="width: 195px;overflow: hidden;display: inline-block;margin-right: 4px;" v-for="item,index in policyData.imgEntityList">
              <div class="demo-upload-list">
                <viewer style="width: 100%;height: 100%; display: flex;align-items: center;justify-content: center;">
                  <img :src="!!item.insuranceImgUrl?apiUrl.imgUrl+item.insuranceImgUrl:'../../static/img/zwtpxd.png'" @error="public.imgDispose">
                </viewer>
              </div>
              <div style="line-height: 30px;text-align: center;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;height: 30px;background: #f3f3f3;border-radius: 4px;">
                {{ item.insuranceImgDescribe }}
              </div>
            </div>
          </div>
        </td>
      </tr>
      <tr>
        <td style="text-align: right;font-weight: 600;">备注</td>
        <td colspan="5" style="min-height:50px;padding:5px 10px;">{{!!policyData.insuranceRemark ? policyData.insuranceRemark : '--'}}</td>
      </tr>
      </tbody>
    </table>
  </div>
</template>
<script>

import vehicleBriefly from '../expire/vehicleBriefly.vue'

export default {
  props: ["selectData"],//接收来自父组件的数据
  components: {
    vehicleBriefly,//车辆简述
  },
  data() {
    return {
      policyData: {},
      vehicleBrieflyData: null,//车辆简述
      requiredParameter: {},

    }
  },
  beforeCreate() {//beforeCreate创建前状态

  },
  created() {//created创建完毕状态

  },
  beforeMount() {//beforeMount挂载前状态   DOM 元素然后塞入页面的过程

  },
  mounted() {//mounted 挂载结束状态
    let that = this;


    that.axios.post(that.apiUrl.webApi + "/management/insurance/insuranceInfo",  {uuid: that.selectData.uuid}).then(res => {
      if (!!res) {
        that.policyData = res.data.data;//修改赋值
      }
    }).catch(err => {
      console.log("失败", err)
    });
    //车辆简述
    that.vehicleBrieflyData = {
      modelType: that.selectData.insuranceModelType,
      value: that.selectData.refVehicleTrailerUuid
    };
  },
  methods: {//执行的方法
    printTest() {
      this.$print(this.$refs.InsuranceDetails) // 使用
    },
  },
  watch: {//监听

  },
  beforeUpdate() {//beforeUpdate 更新前状态

  },
  updated() {//updated 更新完成状态

  },
  beforeDestroy() {//beforeDestroy 销毁前状态

  },
  destroyed() {//destroyed 销毁完成状态

  }
}
</script>
<style lang="less">
._wz_InsuranceDetails {

  >table {
    table-layout:fixed;
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0;
    font-size: 12px !important;

    td {
      min-width: 0;
      height: 40px;
      box-sizing: border-box;
      text-align: left;
      text-overflow: ellipsis;
      border: 1px solid #515a6e;
      padding: 0 10px;
      word-break: break-word;
    }
  }

  .demo-upload-list {
    margin: 5px auto;
    width: 195px;
    height: 140px;
    text-align: center;
    line-height: 140px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    position: relative;
    box-shadow: 0 0 0 0;

    img {
      min-height: 30%;
      max-height: 90%;
      min-width: 30%;
      max-width: 90%;
      //width: 100%;
      //height: 100%;
    }
  }
}

</style>
